<style>
    .pie-info {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pie-chart {
        width: 120px;
        min-height: 120px;
        margin-right: 20px;
    }

    .pie-desc-item {
        display: block;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
    }


    .card-title {
        font-weight: 500;
        font-size: 16px;
        color: #000;
        margin-bottom: 8px;
    }

    .card-sort-desc {
        margin-left: 6px;
        font-size: 12px;
        color: rgba(0, 0, 0, .45);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
    }

    .card-sort {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-left: 19px;
        cursor: pointer;
    }

    .layuimini-main {
        background: #f2f2f2;
        border: 5px solid #f2f2f2;
    }

    .welcome .layui-card {
        border: 1px solid #f2f2f2;
        border-radius: 5px;
    }

    .welcome .icon {
        margin-right: 10px;
        color: #1aa094;
    }

    .welcome .icon-cray {
        color: #ffb800 !important;
    }

    .welcome .icon-blue {
        color: #1e9fff !important;
    }

    .welcome .icon-tip {
        color: #ff5722 !important;
    }

    .welcome .layuimini-qiuck-module {
        text-align: center;
        margin-top: 10px
    }

    .welcome .layuimini-qiuck-module a i {
        display: inline-block;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-radius: 2px;
        font-size: 30px;
        background-color: #F8F8F8;
        color: #333;
        transition: all .3s;
        -webkit-transition: all .3s;
    }

    .welcome .layuimini-qiuck-module a cite {
        position: relative;
        top: 2px;
        display: block;
        color: #666;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
    }

    .welcome .welcome-module {
        width: 100%;
        /* height: 210px; */
    }

    .welcome .panel {
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
    }

    .welcome .panel-body {
        padding: 10px
    }

    .welcome .panel-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 12px;
        color: inherit
    }

    .welcome .label {
        display: inline;
        padding: .2em .6em .3em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em;
        margin-top: .3em;
    }

    .welcome .layui-red {
        color: red
    }

    .welcome .main_btn>p {
        height: 40px;
    }

    .welcome .layui-bg-number {
        background-color: #F8F8F8;
    }

    .welcome .layuimini-notice:hover {
        background: #f6f6f6;
    }

    .welcome .layuimini-notice {
        padding: 7px 16px;
        clear: both;
        font-size: 12px !important;
        cursor: pointer;
        position: relative;
        transition: background 0.2s ease-in-out;
    }

    .welcome .layuimini-notice-title,
    .layuimini-notice-label {
        padding-right: 70px !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    .welcome .layuimini-notice-title {
        line-height: 28px;
        font-size: 14px;
    }

    .welcome .layuimini-notice-extra {
        position: absolute;
        top: 50%;
        margin-top: -8px;
        right: 16px;
        display: inline-block;
        height: 16px;
        color: #999;
    }
</style>
<style>
    .layui-form-radio>.lay-skin-tag,
    .layui-form-checkbox>.lay-skin-tag {
        font-size: 13px;
        border-radius: 100px;
    }

    .layui-form-checked>.lay-skin-tag,
    .layui-form-radioed>.lay-skin-tag {
        color: #fff !important;
        background-color: #16b777 !important;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome">


        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header card-title">今日项目实况</div>
                    <div class="layui-card-body">
                        <div class="welcome-module">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <h5>排班人数</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins">1234</h1>
                                                <small>当前分类总记录数</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <h5>考勤异常</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins">1234</h1>
                                                <small>当前分类总记录数</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <h5>运行车辆</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins">1234</h1>
                                                <small>当前分类总记录数</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="panel layui-bg-number">
                                        <div class="panel-body">
                                            <div class="panel-title">
                                                <h5>机械化任务</h5>
                                            </div>
                                            <div class="panel-content">
                                                <h1 class="no-margins">1234</h1>
                                                <small>当前分类总记录数</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header card-title">
                        <div class="flex justify-between">
                            <div> 今日工单
                                <a class="is-clcik" href="javascript:;"
                                    layuimini-content-href="page/processSupervision/workOrder/workOrderBoard?from=home2">
                                    400
                                </a>
                            </div>
                            <div>
                                <i class="layui-icon layui-icon-tips layui-font-grey" lay-on="question_tips"></i>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div class="pie-info">
                            <div id="workOrder" class="pie-chart"></div>
                            <div class="pie-desc layui-font-gray">
                                <div class="pie-desc-item">
                                    <span class="layui-font-gray">
                                        <span class="layui-badge-dot layui-bg-grey"></span>
                                        待接单
                                    </span>
                                    <span class="layui-font-black layui-font-14">45</span>
                                </div>
                                <div class="pie-desc-item">
                                    <span class="layui-font-gray">
                                        <text class="layui-badge-dot layui-bg-blue"></text>
                                        已接单
                                    </span>
                                    <span class="layui-font-black layui-font-14">251</span>
                                </div>
                                <div class="pie-desc-item ">
                                    <span class="ml-4 layui-font-gray">处理中</span>
                                    <span class="layui-font-gray">58</span>
                                </div>
                                <div class="pie-desc-item">
                                    <a href="javascript:;"
                                        layuimini-content-href="page/processSupervision/workOrder/workOrderBoard.html?from=home2&tabActive=3">
                                        <span class="ml-4 layui-font-gray">待验收</span>
                                        <span class="layui-font-gray">13</span>
                                    </a>
                                </div>
                                <div class="pie-desc-item">
                                    <a href="javascript:;"
                                        layuimini-content-href="page/processSupervision/workOrder/workOrderBoard?from=home2&tabActive=4">
                                        <span class="ml-4 layui-font-gray">已完成</span>
                                        <span class="layui-font-gray">174</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="pie-sum flex justify-around layui-font-12 layui-font-black">
                            <div>
                                <div class="layui-font-gray">完工率</div>
                                <span>100.0%</span>
                            </div>
                            <div>
                                <div class="layui-font-gray">及时接单率</div>
                                <span>98.8%</span>
                            </div>
                            <div>
                                <div class="layui-font-gray">及时完工率</div>
                                <span>98.1%</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header card-title">



                        <div class="flex justify-between">
                            <div> 今日我的工作
                            </div>
                            <div>
                                <i class="layui-icon layui-icon-set layui-font-grey" lay-on="setting"></i>
                            </div>
                        </div>




                    </div>
                    <div class="layui-card-body">
                        <div class="layui-bg-gray p-4">
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <div class="flex items-start">
                                        <div class="mr-3">
                                            <text class="layui-badge-dot layui-bg-primary"></text>
                                        </div>
                                        <div>
                                            <div class="layui-font-gray layui-font-12">已派单</div>
                                            <div class="layui-font-black">0</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="flex items-start">
                                        <div class="mr-3">
                                            <text class="layui-badge-dot layui-bg-blue"></text>
                                        </div>
                                        <div>
                                            <div class="layui-font-gray layui-font-12">手动派单</div>
                                            <div class="layui-font-black">0</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="flex items-start">
                                        <div class="mr-3">
                                            <text class="layui-badge-dot layui-bg-blue"></text>
                                        </div>
                                        <div>
                                            <div class="layui-font-gray layui-font-12">事件转派</div>
                                            <div class="layui-font-black">0</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-row layui-col-space5 mt-3">
                            <div class="layui-col-xs6 layui-col-md6 ">

                                <span class="layui-font-gray layui-font-12">已验收工单</span>
                                <span class="layui-font-black">0</span>
                            </div>
                            <div class="layui-col-xs6 layui-col-md6 ">
                                <span class="layui-font-gray layui-font-12">已抽查工单</span>
                                <span class="layui-font-black">0</span>
                            </div>
                        </div>
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-fluid layui-btn-sm mt-3"
                            lay-on="mission_btn">我要报单</button>

                    </div>
                </div>

            </div>
            <div class="layui-col-md5">

                <div class="layui-card">
                    <div class="layui-card-header card-title">
                        <!-- <div class="flex items-center justify-between"> -->
                        <div class="flex items-center justify-between">
                            <div>
                                <a href="javascript:;"
                                    layuimini-content-href="page/eventManagement/eventManager/event.html">
                                    待处理事件/预警
                                </a>
                                <span class="card-sort-desc">
                                    <i class="layui-edge layui-edge-top"></i>
                                    <i class="layui-edge layui-edge-bottom"></i>

                                    按最新/按最早</span>

                            </div>
                            <div class="layui-font-gray layui-font-12">今日已转工单事件数：<span
                                    class="layui-font-black">182</span></div>
                        </div>
                    </div>
                    <div class="layui-card-body layui-text">
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">修改选项卡样式</div>
                            <div class="layuimini-notice-extra">2019-07-11 23:06</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">新增系统404模板</div>
                            <div class="layuimini-notice-extra">2019-07-11 12:57</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">新增treetable插件和菜单管理样式</div>
                            <div class="layuimini-notice-extra">2019-07-05 14:28</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">修改logo缩放问题</div>
                            <div class="layuimini-notice-extra">2019-07-04 11:02</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">修复左侧菜单缩放tab无法移动</div>
                            <div class="layuimini-notice-extra">2019-06-17 11:55</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">修复多模块菜单栏展开有问题</div>
                            <div class="layuimini-notice-extra">2019-06-13 14:53</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header card-title">
                        <!-- <div class="flex items-center justify-between"> -->
                        <div class="flex items-center justify-between">
                            <div>
                                <a href="javascript:;"
                                    layuimini-content-href="page/eventManagement/eventManager/event.html">
                                    待处理事件/预警
                                </a>
                                <span class="card-sort-desc">
                                    <i class="layui-edge layui-edge-top"></i>
                                    <i class="layui-edge layui-edge-bottom"></i>

                                    按最新/按最早</span>

                            </div>
                            <div class="layui-font-gray layui-font-12">今日已转工单事件数：<span
                                    class="layui-font-black">182</span></div>
                        </div>
                    </div>
                    <div class="layui-card-body layui-text">
                        <button type="button"
                            class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm">IOT报事</button>
                        <button type="button"
                            class="layui-btn layui-btn-radius layui-btn-pirmary layui-btn-sm">市民报事</button>




                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">修改选项卡样式</div>
                            <div class="layuimini-notice-extra">2019-07-11 23:06</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">新增系统404模板</div>
                            <div class="layuimini-notice-extra">2019-07-11 12:57</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">新增treetable插件和菜单管理样式</div>
                            <div class="layuimini-notice-extra">2019-07-05 14:28</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">修改logo缩放问题</div>
                            <div class="layuimini-notice-extra">2019-07-04 11:02</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">修复左侧菜单缩放tab无法移动</div>
                            <div class="layuimini-notice-extra">2019-06-17 11:55</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">修复多模块菜单栏展开有问题</div>
                            <div class="layuimini-notice-extra">2019-06-13 14:53</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">


                <div class="layui-card">
                    <div class="layui-card-header card-title">版本信息</div>
                    <div class="layui-card-body layui-text">
                        <table class="layui-table">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td>框架名称</td>
                                    <td>

                                    </td>
                                </tr>
                                <tr>
                                    <td>当前版本</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>主要特色</td>
                                    <td>零门槛 / 响应式 / 清爽 / 极简</td>
                                </tr>
                                <tr>
                                    <td>演示地址</td>
                                    <td>

                                    </td>
                                </tr>
                                <tr>
                                    <td>下载地址</td>
                                    <td>

                                    </td>
                                </tr>
                                <tr>
                                    <td>Gitee</td>
                                    <td style="padding-bottom: 0;">
                                    </td>
                                </tr>
                                <tr>
                                    <td>Github</td>
                                    <td style="padding-bottom: 0;">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div id="ID-test-layer-wrapper" style="display: none;">
            <div style="padding:16px;">
                弹出已经存在于页面中的一段元素<br>
                通常是放置在 &lt;body&gt; 根节点下
            </div>
        </div>

    </div>
</div>
<script>
    layui.use(['layer', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            util = layui.util,
            echarts = layui.echarts;


        /******************** 事件 start ********************/
        $(window).on("resize", function () {
            console.log('监听窗口大小变化')
        });
        util.on('lay-on', {
            //我要报单
            'setting': function () {
                var content = miniPage.getHrefContent('page/user-setting.html');
                var openWH = miniPage.getOpenWidthHeight();
                var index = layer.open({
                    title: '设置',
                    type: 1,
                    shade: 0.2,
                    maxmin: false,
                    shadeClose: true,
                    area: ['400px', 'auto'],
                    content: content,
                });
            },
            //我要报单
            'mission_btn': function () {
                var content = miniPage.getHrefContent('page/user-setting.html');
                var openWH = miniPage.getOpenWidthHeight();
                var index = layer.open({
                    title: '工单派发',
                    type: 1,
                    shade: 0.2,
                    maxmin: false,
                    shadeClose: true,
                    area: ['800px', 'auto'],
                    content: content,
                });
            },
            // 问号事件
            'question_tips': function () {

                layer.tips(`<div class="t-c  layui-font-black layui-font-16 solid-bottom py-3 mb-3"><b>指标说明</b></div>
<p class="layui-font-13 layui-font-black mt-1">以下各指标针对计划开始时间在00:00:00-23:59:59时间段内的工单</p>
<p class="layui-font-13 layui-font-black mt-1">今日工单：计划开始时间为今日的工单总数量</p>
<p class="layui-font-13 layui-font-black mt-1">待接单：当前状态为待接单的工单数</p>
<p class="layui-font-13 layui-font-black mt-1">已接单：今日工单数-待接单数</p>
<p class="layui-font-13 layui-font-black mt-1">处理中：当前状态为处理中和挂起的工单数</p>
<p class="layui-font-13 layui-font-black mt-1">待验收：当前状态为待验收的工单数</p>
<p class="layui-font-13 layui-font-black mt-1">已完成：当前状态为已完成的工单数</p>
<p class="layui-font-13 layui-font-black mt-1">接单率：应接单工单中接单的工单数/应接单工单数</p>
<p class="layui-font-13 layui-font-black mt-1">完工率：应完工工单中已经结束工作的工单数/应完工工单数</p>
<p class="layui-font-13 layui-font-black mt-1">及时接单率：及时接单数/应接单工单数</p>
<p class="layui-font-13 layui-font-black mt-1">及时完工率：及时完工数/应完工工单数</p>
<p class="layui-font-13 layui-font-gray mt-1">注：</p>
<p class="layui-font-13 layui-font-gray mt-1">1.应接单工单数：计划开始时间 <p 当前时间的工单数</p>
<p class="layui-font-13 layui-font-gray mt-1">2.应完工工单数：计划结束时间 <p 当前时间的工单数，去掉已取消及已关闭工单</p>
<p class="layui-font-13 layui-font-gray mt-1">（举例说明：当前是上午，此时的应接单/应完工工单数不包含计划开始时间在下午的工单）</p>
<p class="layui-font-13 layui-font-gray mt-1">3.及时接单数：应接单工单中接单（指派）时间 <p 计划开始时间的工单数</p>
<p class="layui-font-13 layui-font-gray mt-1">4.及时完工数：应完工工单中实际结束时间 <p 计划结束时间的工单数</p>`, this, {
                    tips: [2, '#ffffff'],
                    area: ['450px', 'auto']

                });
            },
            //地图单页面赋值
            'maps_look': function () {
                miniPage.renderPageCreate('page/laborOperations/laborJobManager/components/map.html')
            }
        })


        /**
         * 查看公告信息
         **/
        $('body').on('click', '.layuimini-notice', function () {
            var noticeTime = $(this).children('.layuimini-notice-extra').text()
            var content = miniPage.getHrefContent('page/components/home/incidentDetail.html?id=test001');
            var openWH = miniPage.getOpenWidthHeight();
            var index = layer.open({
                title: '事件详情',
                type: 1,
                shade: 0.2,
                maxmin: false,
                shadeClose: true,
                noticeTime,
                area: ['1200px', 'auto'],
                content: content
            });
            return false;

            var title = $(this).children('.layuimini-notice-title').text(),
                noticeTime = $(this).children('.layuimini-notice-extra').text(),
                content = $(this).children('.layuimini-notice-content').html();
            var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
                '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
                '<div style="font-size: 12px">' + content + '</div>\n' +
                '</div>\n';
            parent.layer.open({
                type: 1,
                title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
                area: '300px;',
                shade: 0.8,
                id: 'layuimini-notice',
                btn: ['查看', '取消'],
                btnAlign: 'c',
                moveType: 1,
                content: html,
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: 'https://gitee.com/zhongshaofa/layuimini',
                        target: '_blank'
                    });
                }
            });
        });

        /**
         * 报表功能
         */
        var workOrderChart = echarts.init(document.getElementById('workOrder'));

        //接单率
        var percent = 10;

        var option = {
            series: [{
                type: 'pie',
                radius: ['70%', '100%'],
                label: {
                    show: true,
                    position: 'center',
                    formatter: function (params) {
                        if (params.name === '接单率') {
                            return '\n{gap| }\n\n{text1|接单率}\n{text2|' + params.percent + '%}';
                        }
                        return '';//其他不显示
                    },
                    rich: {
                        gap: { fontSize: 30, color: 'transparent' }, // 透明占位符模拟 margin
                        text1: {
                            fontSize: 12,
                            color: '#999999',
                            align: 'center',
                            fontWeight: 'bold',
                            lineHeight: 30,
                        },
                        text2: {
                            fontSize: 16,
                            color: '#262626',
                            align: 'center'

                        }
                    },
                    verticalAlign: 'middle'
                },
                data: [
                    { value: percent, name: '接单率', itemStyle: { color: '#0080FF' } },
                    { value: 100 - percent, name: '未完成', itemStyle: { color: '#e0e0e0' } }
                ],
                hoverAnimation: false,
                labelLine: {
                    show: false
                }
            }]
        };

        workOrderChart.setOption(option);
        // echarts 窗口缩放自适应
        window.onresize = function () {
            workOrderChart.resize();
        }

    });
</script>